<dom-module id="package-item">
    <link rel="import" type="css" href="package-item.css">
    <template>
        <div class="pkg">
            <div class="left">
                <div class="pkginfo">
                    <editor-checkbox checked="{{_checked}}" class="flex-none"></editor-checkbox>
                    <i class$="[[_foldClass(folded)]]" on-click="_onFoldClick"></i>
                    <i class="fa fa-folder fold flex-none" on-click="_onShowinFinderClick"></i>
                    <span class="name pkgname">[[value.info.name]]</span>
                    <editor-label class$="{{_tagClass(tag,value.info.version)}}">[[formatTag(tag)]]</editor-label>
                    <i class="fa fa-times delete" on-click="resetTag"></i>
                    <editor-loader class="mini loader" id="loader" hidden></editor-loader>
                </div>
            </div>
            <div class="right">
                <div class="layout center horizontal">
                    <span class="oldversion">[[oldVersion]]</span>
                    <i class="fa fa-long-arrow-right oldversion"></i>
                    <div class="version">
                        <editor-input value="{{value.info.version}}" on-value-changed="_versionChanged"></editor-input>
                    </div>
                </div>
            </div>
        </div>

        <div class="details">
            <div class="flex-1 contain">
                <span class="detailname"><i class="icon fa fa-suitcase"></i>hosts</span>
                <div id="hosts" class="items">
                    <template is="dom-repeat" id="hoststemplate" items="[[obj2Array(value.info.hosts)]]">
                        <div class="layout center horizontal between">
                            <div class="left">
                                <div class="item">
                                    <div>
                                        <span class="name flex-1" id="name">[[item.name]]</span>
                                        <i class="fa fa-refresh refresh" on-click="_onRefreshHostsClick"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="version" id="version">
                                    <span class="oldversion">[[_oldHostsVersion(item)]]</span>
                                    <i class="fa fa-long-arrow-right oldversion"></i>
                                    <editor-input value="{{item.version}}" on-value-changed="_onHostChanged"></editor-input>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>

                <span class="detailname"><i class="icon fa fa-hdd-o"></i>dependencies</span>
                <div id="dependencies" class="items">
                    <template is="dom-repeat" id="deptemplate" items="[[obj2Array(value.info.dependencies)]]">
                        <div class="layout center horizontal between">
                            <div class="left">
                                <div class="item">
                                    <div>
                                        <span class="name flex-1">[[item.name]]</span>
                                        <i class="fa fa-refresh refresh" on-click="_onRefreshDependenciesClick"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="version" id="version">
                                    <span class="oldversion">[[_oldDepsVersion(item)]]</span>
                                    <i class="fa fa-long-arrow-right oldversion"></i>
                                    <editor-input value="{{item.version}}" on-value-changed="_onDependenciesChanged"></editor-input>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </template>

    <script type="text/javascript" src="package-item.js"></script>
</dom-module>
